<template>
  <div id="app" style="height: 100%;">
    <template v-if="getUseNormalRouteView">
      <router-view/>
    </template>
    <template v-if="!getUseNormalRouteView">
      <el-container>
        <el-aside width="225px" :class="!unUpdated?'top0':''">
          <div v-for="(menu,index) in menus" :key="menu.id" v-permission="menu.resourceCode">
            <div class="index-menu-item" @click="showChildMenu(menu)">
              {{menu.label}}
              <span v-if="!menu.show" class="imi-icon">
                <i class="el-icon-arrow-down"></i>
              </span>
              <span v-if="menu.show" class="imi-icon">
                <i class="el-icon-arrow-up"></i>
              </span>
            </div>
            <template v-if="menu.show && menu.child && (menu.child.length > 0)">
              <div v-for="childMenu in menu.child" :key="childMenu.id" v-permission="childMenu.resourceCode">
                <div @click="openPage(childMenu,index)" class="index-menu-child-item"
                  :class="{'index-menu-child-item-active':activeChildMenuId == childMenu.id}">
                  {{childMenu.label}}
                </div>
              </div>
            </template>
          </div>
        </el-aside>
        <el-container>
          <el-header v-if="unUpdated">
            <img class="logo" src="../static/img/logo.png" height="30" width="138" />
            <span style="float:left;margin-left:10px;font-size:18px;">LEAN后台系统</span>
            欢迎您，{{getUserInfo.userName}}<a href="javascript:;" @click="loginOut">退出登录</a>
          </el-header>
          <el-main :class="!unUpdated?'top0':''">
            <el-breadcrumb separator-class="el-icon-arrow-right" v-for="(item,index) in menus" :key="item.id" v-if="index == menusIndex">
              <el-breadcrumb-item v-for="items in item.child" :key="items.id" v-if="activeChildMenuId == items.id">{{item.label}} > {{items.label}}</el-breadcrumb-item>
            </el-breadcrumb>
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </template>
  </div>
</template>

<script>
  import {mapGetters,mapMutations} from 'vuex'
  import menus from './router/menu.js'
  export default {
    data() {
      return {
        menus: this.getMenus(),
        activeChildMenuId: '',
        menusIndex: '',
        unUpdated: true,
      }
    },
    watch: {
      getRelocalMenu(val){
        if(val){
          this.setRelocalMenu(false);
          this.setCurrentMenuWhenRefresh();
        }
      },
    },
    computed:{
      ...mapGetters(['getUserInfo','getUseNormalRouteView','getRelocalMenu'])
    },
    mounted(){
      this.setCurrentMenuWhenRefresh();
    },
    beforeDestroy() {
      console.log('appdestroy')
    },
    methods: {
      ...mapMutations(['setRelocalMenu']),
      getMenus(){
        for(var i in menus){
          menus[i].show = false;
        }
        console.log(menus);
        return menus;
      },
      showChildMenu(menu){
        for(var i in this.menus){
          if(this.menus[i].id != menu.id){
            this.menus[i].show = false;
          }
        }
        menu.show = !menu.show;
      },
      openPage(menu,index){
        this.menusIndex = index;
        this.activeChildMenuId = menu.id;
        this.$router.push({name:menu.route});
        sessionStorage.menu = this.$route.name;
      },
      setCurrentMenuWhenRefresh(){
        let routeName = sessionStorage.menu;
        for(var index in this.menus){
          let firstLevelMenu = this.menus[index];
          firstLevelMenu.show = false;
          if(firstLevelMenu.child && firstLevelMenu.child.length > 0){
            firstLevelMenu.child.forEach(childMenu=>{
              if(childMenu.id == routeName){
                firstLevelMenu.show = true;
                  this.activeChildMenuId = childMenu.id;
                  this.menusIndex = index;
              }
            })
          }
        }
      },
      loginOut(){
        sessionStorage.clear();
        this.$router.push({path:'/login'});
        this.activeChildMenuId = '';
        this.menusIndex = '';
      }
    }
  }
</script>
<style type="text/css">
  .el-header{position: fixed; left: 0; top: 0; width: 100%; z-index: 99;}
  .logo{float: left; margin-top: 11px;}
  .el-aside,.el-main{padding-top: 60px !important;}
  .index-menu-item{
     height: 56px;line-height: 56px;padding:0 14px; font-size: 14px;
     cursor: pointer;
  }
  .imi-icon{
      display: inline-block;
      float: right;
      font-weight: bold;
  }
  .index-menu-item:hover{background-color:#233345;}
  .index-menu-child-item{
     height: 44px;line-height: 44px;padding:0 14px 0 30px;position: relative;   
     cursor: pointer;}
  .index-menu-child-item:hover{
    background-color: #515f72;color: white;
  }
  .index-menu-child-item::after{
             position: absolute;
             content: ' ';width: 2px;
             left: 0;top: 0;bottom: 0;
         }
  .index-menu-child-item-active{
     background-color: #515f72;color: white;
  }
  .index-menu-child-item-active::after{
      position: absolute;
      content: ' ';width: 2px;
      background-color: #337FFF;
      left: 0;top: 0;bottom: 0;
  }
  .el-aside.top0,
.el-main.top0 {
  padding-top: 0 !important;
}
</style>
